---
import { LoadingLogo } from '@ag-website-shared/components/loading-logo/LoadingLogo';

interface Props {
    exampleHeight?: number;
    pageName: string;
    exampleName: string;
    hasExampleConsoleLog?: boolean;
}

const DEFAULT_HEIGHT = 500;
const FRAME_WRAPPER_HEIGHT = 48 + 26;

const { exampleHeight = DEFAULT_HEIGHT, pageName, exampleName, hasExampleConsoleLog } = Astro.props as Props;
const EXAMPLE_CONSOLE_LOG_HEIGHT = hasExampleConsoleLog ? 100 : 0;
const minHeight = exampleHeight + FRAME_WRAPPER_HEIGHT + EXAMPLE_CONSOLE_LOG_HEIGHT;
const id = `example-${exampleName}`;
---

<div
    id={id}
    class:list={[
        'container',
        'example-runner-outer',
        {
            hasExampleConsoleLog,
        },
    ]}
    style={{ minHeight: `${minHeight}px` }}
>
    <LoadingLogo client:load pageName={pageName} exampleName={exampleName} />
    <slot />
</div>

<style lang="scss">
    @use 'sass:math';

    $half-logger-height: math.div(100px, 2);

    .container {
        position: relative;

        :global(.logomark) {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(2);
        }

        &:global(.hasExampleConsoleLog) :global(.logomark) {
            transform: translate(-50%, calc(-100% - #{$half-logger-height})) scale(2);
        }
    }
</style>
